import { NavLink, Routes, Route, Navigate } from 'react-router-dom';
import Header  from './components/header'; 
import Home from './pages/Home/Home';
import About from './pages/About/About';
import './App.css'

function App() {
    // 自定义高亮路由链接样式回调函数
    function isActive({isActive}){
        return isActive ? 'list-group-item hightlight' : 'list-group-item'
    }

    return (
        <div id="root">
            <div>
                <div className="row">
                    <Header/> 
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 注册路由链接 */}
                            <NavLink className={isActive} to="/about">
                                About
                            </NavLink>
                            <NavLink className="list-group-item" to="/home">
                                Home
                            </NavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 注册路由组件 */}
                                <Routes>
                                    <Route path="/about" element={<About/>} /> 
                                    <Route path="/home" element={<Home/>} />
                                    {/* url 路由为空时，重定向至路由 /about 对应页面 */}
                                    <Route path='/' element={<Navigate to="/about"/>}/>
                                </Routes>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;
